<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>网页版2048游戏</title>
    <style>
      body{
        background-color: #faf8ef;
      }
      /* 游戏棋盘格 */
      body{font-family:Arial;text-align:center;}
      .game{margin:0 auto;/*margin-top:40px;*/text-align:center;display:inline-block;}
      .game-score{font-size:20px;margin:20px auto;border: 1px solid lightgray;width: 150px;height: 100px;border-radius: 20px;color: lightyellow;background-color: #ede0c8}
      .game-score p{
        line-height: 15px;
        text-align: center;
      }
      .game-score span{
        top: 0;
        font-size: 40px;
        color: tan;
        font-weight: bolder;
      }
      .game-container{background-color:#bbada0;border-radius:10px;position:relative;}
      .game-cell{border-radius:6px;background-color:#ccc0b3;position:absolute;}
      .game-num{width:0px;height:0px;border-radius:6px;font-weight:bold;font-size:40px;color:#fff;text-align:center;position:absolute; text-shadow: 0 0 3px white}
      .game-num-2{background:#eee4da;color:lightyellow;}
      .game-num-4{background:#ede0c8;color:lightyellow;}
      .game-num-8{background:#f2b179;}
      .game-num-16{background:#f59563;}
      .game-num-32{background:#f67c5f;}
      .game-num-64{background:#f65e3b;}
      .game-num-128{background:#edcf72;font-size:35px;}
      .game-num-256{background:#edcc61;font-size:35px;}
      .game-num-512{background:#9c0;font-size:35px;}
      .game-num-1024{background:#33b5e5;font-size:30px;}
      .game-num-2048{background:#09c;font-size:30px;}
      /*游戏结束*/
      .game-over{width:100%;height:100%;position:absolute;border-radius:10px;box-sizing:border-box;z-index:1;display:table;background:rgba(123,102,85,0.5)}
      .game-over-info{display:table-cell;vertical-align:middle}
      .game-over p{font-size:45px;color:#fff;margin:20px auto;}
      .game-over span{cursor:pointer;background-color:rgba(103,82,65,0.6);display:block;margin:20px auto;width:180px;padding:10px 10px;font-size:25px;color:#f7f2e5;border-radius:10px;border:1px solid #978271;transition:all .2s}
      .game-over span:hover{background-color:rgba(103,82,65,0.7);color:#fff}
      .game-hide{display:none;}
    </style>
  </head>
  <body>
    <div id="game" class="game">
      <div style="font-size: 35px;color: #776e65">朱志文 2021037089</div>
      <div class="game-score"><p>当前积分</p><span id="game_score">0</span></div>
      <div id="game_container" class="game-container">
        <div id="game_over" class="game-over game-hide">
          <div class="game-over-info">
            <div id="game_over_info"></div>
            <span id="game_restart">重新开始</span>
          </div>
        </div>
      </div>
    </div>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script src="js/Game2048.js"></script>
    <script>
      Game2048({prefix: 'game', len: 5, size: 100, margin: 20});
    </script>
  </body>
</html>